<template>
  <div>
    <lb-title :isBack="true"></lb-title>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="copyrightForm"
        :rules="copyrightFormRules"
        ref="copyrightForm"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="copyrightForm.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="版权图片" prop="image">
          <lb-cover
            :fileList="copyrightForm.image"
            @selectedFiles="getCover"
          ></lb-cover>
        </el-form-item>
        <el-form-item label="版权文字" prop="text">
          <el-input
            v-model="copyrightForm.text"
            placeholder="版权文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phone">
          <el-input
            v-model="copyrightForm.phone"
            placeholder="电话号码"
          ></el-input>
          <lb-tool-tips
            tips="400格式：400-xxxxxxx,座机格式028-xxxxxxxx"
          ></lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="submitForm('copyrightForm')"
            >{{ $t('action.submit') }}</el-button
          >
          <el-button type="default" @click="$router.back(-1)">{{
            $t('action.back')
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let valiDateTel = (rule, value, callback) => {
      let reg = /((^400)-([0-9]{7})$)|(^1[3-9]\d{9}$)|((^0\d{2,3})-(\d{7,8})$)/
      if (!value && !rule.noValid) {
        callback(new Error('请输入电话号码'))
      } else if (reg.test(value)) {
        callback()
      } else if (rule.noValid && !value) {
        callback()
      } else {
        callback(new Error('请输入正确电话号码'))
      }
    }
    return {
      copyrightForm: {
        name: '',
        image: '',
        text: '',
        phone: ''
      },
      copyrightFormRules: {
        name: { required: true, type: 'string', message: '请输入名称', trigger: 'blur' },
        image: { required: true, type: 'array', message: '请输入上传图片', trigger: 'change' },
        text: { required: true, type: 'string', message: '请输入版权文字', trigger: 'blur' },
        phone: { required: true, type: 'string', validator: valiDateTel, message: '请输入电话号码', trigger: 'blur' }
      }
    }
  },
  created () {
    let { id } = this.$route.query
    if (id) {
      this.getFormInfo(id)
    }
  },
  methods: {
    getFormInfo (id) {
      this.$api.getCopyrightFormInfo({ id }).then(res => {
        if (res.code === 200) {
          for (let key in this.copyrightForm) {
            this.copyrightForm[key] = res.data[key]
          }
          this.copyrightForm.id = res.data.id
          this.copyrightForm.image = [{ url: res.data.image }]
        }
      })
    },
    submitForm (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.copyrightForm))
          subForm.image = subForm.image[0].url
          let ajaxUrl = subForm.id ? 'editCopyrightFormInfo' : 'addCopyrightFormInfo'
          this.$api[ajaxUrl](subForm).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
              this.$router.back(-1)
            }
          })
        }
      })
    },
    getCover (image) {
      this.copyrightForm.image = image
    }
  },
  watch: {
    'copyrightForm.image' (newVal, oldVal) {
      if (!oldVal && newVal) {
        this.$refs.copyrightForm.clearValidate('image')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
